<script setup>
import {  Setting, House } from '@element-plus/icons-vue';
import { ref, reactive, getCurrentInstance, onMounted, onBeforeUnmount } from "vue";
import { goRouter } from "@/utils";
import moment from 'moment';


const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

let timer = null;
let time = ref(null);

let pageName = ref('index');

onMounted(() => {
  pageName.value = _this.$route.name;
  timer = setInterval(() => {
    time.value = moment().format('yyyy-MM-DD HH:mm:ss');
  }, 1000);
});

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  };
});

function goto(name){
  pageName.value = name;
  goRouter('/' + name);
}
</script>
<template>
  <el-container class="mw_layout">
    <el-header class="item_header">
      <el-icon class="item_home" v-show="pageName == 'statistics'" color="#4BB5FF" @click="goto('index')"><House /></el-icon>
      <div class="item_title">CV PILOT FOR PUBLIC SAFETY</div> 
      <div class="now_time">
        <span class="time_date">{{ time }}</span>
        <el-icon color="#4BB5FF" style="cursor: pointer;" @click="goto('statistics')"><Setting /></el-icon>
      </div>
    </el-header>
    <el-main class="mw_main">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<style scoped lang='less'>
.mw_layout{
  width: 100%;
  height: 100%;
  // background-color: #03032E;
  background-color: #002356;
  transition: all 0.5s;

  .mw_main{
    // overflow: hidden;
    z-index: 100;
  }
  
  .item_header{
    background: url('~@img/ico_header.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
    .item_home{
      position: absolute;
      left: 30px;
      top: 26px;
      color: #4BB5FF;
      font-size: 24px;
      cursor: pointer;
    }
    .item_title{
      width: 100%;
      text-align: center;
      color: #D7F4FB;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 5px;
      line-height: 1.8;
      text-shadow: 0 5px #04245E;
      user-select: none;
    }
    .now_time{
      display: flex;
      align-items: center;
      position: absolute;
      right: 30px;
      top: 32px;
      color: #4BB5FF;
      font-size: 20px;
      font-weight: 800;
      .time_date{
        padding-right: 8px;
      }
    }
  }
}
</style>